<template>
  <div>
    <el-divider content-position="left">修改个人信息</el-divider>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="username" label="用户姓名:">
        <el-input style="width: 400px" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item prop="pic" label="用户照片:">
        <el-upload
          v-model="form.pic"
          class="avatar-uploader"
          :action="`${UPLOADURL}/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.pic" :src="form.pic" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item prop="password" label="修改密码:">
        <el-input style="width: 400px" v-model="form.password"></el-input>
      </el-form-item>
      <el-button style="margin-left: 200px" type="primary" @click="submit"
        >提交</el-button
      >
    </el-form>
  </div>
</template>

<script>
import { mapState } from "vuex";
import httpApi from "@/http";
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        pic: "",
      },
      rules: {
        username: [
          { required: true, message: "请填写用户名", trigger: "blur" },
          {
            pattern: /^\w{6,12}$/,
            message: "6~12位字符，可以包含：数字、字母、下划线",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请填写密码", trigger: "blur" },
          {
            pattern: /^\w{6,13}$/,
            message: "6~13位字符，可以包含：数字、字母、下划线",
            trigger: "blur",
          },
        ],
        pic: [{ required: true, message: "必填", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.form.pic = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          httpApi.systemApi.userUpdate(this.form).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message({ type: "success", message: "修改成功" });
              sessionStorage.removeItem("user");
              this.$store.dispatch("login", "");
              this.$router.push("/user/login");
              history.pushState(null, null, document.URL);
              window.addEventListener(
                "popstate",
                function (e) {
                  history.pushState(null, null, document.URL);
                },
                false
              );
            } else {
              this.$message({ type: "error", message: res.data.msg });
            }
          });
        }
      });
    },
  },
  computed: mapState(["user"]),
  mounted() {
    this.form.username = this.user.username;
    this.form.pic = this.user.pic;
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  border: 1px dashed #dcdfe6;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-divider__text {
  font-size: 20px;
  font-weight: bold;
}
</style>